<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui">


<h:form id="exercisesForm" prependId="false">
	<p:panel header="#{msgs.Exercises}">
		<p:dataTable id="exercisesTableSource" value="#{exerciseGroupBean.filteredExercises}" var="exercise" paginator="true"  
			paginatorAlwaysVisible="false"  paginatorPosition="bottom" rows="8" emptyMessage="#{msgs.NoResults}" rowStyleClass="#{exercise == exerciseGroupBean.exercise ? 'ui-state-highlight' : null}">   
			<p:columnGroup type="header" >  
				<p:row>
					<p:column colspan="7" style="text-align:center;position:relative;"> 
						<f:facet name="header">
							<h:outputText value="#{msgs.ModalitysExercises}" />
							<p:commandButton action="#{exerciseGroupBean.toFilterExercise}" process="@this" style="position:absolute;right:0px;top:0px;"
								update=":filterExerciseDialog" oncomplete="wfilterExerciseDialog.show();"  title="#{msgs.Add}" icon="ui-icon-search" styleClass="ui-table-button2"/>
						</f:facet>
					</p:column>
				</p:row>
				<p:row>
					<p:column	colspan="3"  >
						<f:facet name="header"> 
							<h:outputText value="#{msgs.Name}" style="padding-top:4px" />
						</f:facet>
					</p:column>
					<p:column	colspan="1" style="padding:0px;margin:0px;max-width:400px">
						<f:facet name="header">
							<h:outputText value="#{msgs.Description}"/>
						</f:facet>
					</p:column>
					<p:column	colspan="1" style="padding:0px;margin:0px;">
						<f:facet name="header">
							<h:outputText value="#{msgs.BodyRegion}"/> 
						</f:facet>
					</p:column>
					<p:column	colspan="1" style="padding:0px;margin:0px;" >
						<f:facet name="header">
							<h:outputText value="#{msgs.MuscleGroup}"/>
						</f:facet>
					</p:column>
				</p:row>	 
			</p:columnGroup>

			<p:column colspan="1" headerText="#{msgs.Name}" style="max-width:150px;min-width:150px;width:150px"  >
				<h:outputText value="#{exercise.name}" />
			</p:column>

			<p:column colspan="1" styleClass="ui-table-button-row" >
				<p:commandButton  title="#{msgs.View}" action="#{exerciseGroupBean.toViewExercise}" icon="ui-icon-search" 
					update=":exerciseDialog" oncomplete="wexerciseDialog.show()"  styleClass="ui-table-button">
					<f:setPropertyActionListener target="#{exerciseGroupBean.exercise}" value="#{exercise}"/>
				</p:commandButton>				
			</p:column>


			<p:column colspan="1" styleClass="ui-table-button-row"  >
				<p:commandButton title="#{msgs.Add}"  action="#{exerciseGroupBean.addExercise}" icon="ui-icon-plus" styleClass="ui-table-button"
					update=":growl, :tabExerciseGroup:exercisesForm:exercisesTableSource, :tabExerciseGroup:exercisesForm:exercisesTable" >
					<f:setPropertyActionListener target="#{exerciseGroupBean.selExercise}" value="#{exercise}"/>
				</p:commandButton>
			</p:column>		

			<p:column headerText="#{msgs.Description}" style="max-width:300px;min-width:300px;width:300px" >
				<h:outputText value="#{exercise.description}" />
			</p:column>		

			<p:column headerText="#{msgs.BodyRegion}" >
				<h:outputText value="#{exercise.bodyRegionsText}" />
			</p:column>		

			<p:column colspan="2" headerText="#{msgs.MuscleGroup}" >
				<h:outputText value="#{exercise.muscleGroupsText}" />
			</p:column>		
		</p:dataTable>	
		
		<p:spacer height="50" />
		
		<p:dataTable id="exercisesTable" value="#{exerciseGroupBean.exerciseGroup.exercises}" var="exercise" paginator="true"  
			paginatorAlwaysVisible="false"  paginatorPosition="bottom" rows="8" emptyMessage="#{msgs.NoResults}" rowStyleClass="#{exercise == exerciseGroupBean.exercise ? 'ui-state-highlight' : null}">   

			<p:columnGroup type="header" >  
				<p:row>
					<p:column colspan="8" style="text-align:center;">
						<f:facet name="header">
							<h:outputText value="#{msgs.ExerciseGroupExercises}: #{exerciseGroupBean.exerciseGroup.name}" />
						</f:facet>
					</p:column>
				</p:row>
				<p:row>
					<p:column	colspan="4"  >
						<f:facet name="header" > 
							<h:outputText value="#{msgs.Name}" style="padding-top:4px"/>
						</f:facet>
					</p:column>
					<p:column	colspan="1" style="padding:0px;margin:0px;max-width:300px;min-width:300px;width:300px">
						<f:facet name="header">
							<h:outputText value="#{msgs.Description}"/>
						</f:facet>
					</p:column>
					<p:column	colspan="1" style="padding:0px;margin:0px;">
						<f:facet name="header">
							<h:outputText value="#{msgs.BodyRegion}"/> 
						</f:facet>
					</p:column>
					<p:column	colspan="1" style="padding:0px;margin:0px;">
						<f:facet name="header">
							<h:outputText value="#{msgs.MuscleGroup}"/>
						</f:facet>
					</p:column>
				</p:row>	 
			</p:columnGroup>

			<p:column colspan="1"	styleClass="ui-table-button-row" style="position:relative;max-height:15px !important;padding-top:0px !important;padding-bottom:0px !important"  >
				<p:commandButton actionListener="#{exerciseGroupBean.upExercise}"   update="exercisesTable"  title="#{msgs.Up}" 
					style="float:left;top:0px;" 	icon="ui-icon-triangle-1-n" styleClass="ui-half-table-button" >
					<f:attribute name="exercise" value="#{exercise}"/>
				</p:commandButton > 
				<p:commandButton actionListener="#{exerciseGroupBean.downExercise}"   update="exercisesTable"  title="#{msgs.Down}" 
					style="float:left;" 			icon="ui-icon-triangle-1-s" styleClass="ui-half-table-button" >
					<f:attribute name="exercise" value="#{exercise}"/>
				</p:commandButton >
			</p:column>

			<p:column colspan="1" headerText="#{msgs.Name}" style="max-width:150px;min-width:150px;width:150px"  >
				<h:outputText value="#{exercise.name}" />
			</p:column>

			<p:column colspan="1" styleClass="ui-table-button-row" >
				<p:commandButton  title="#{msgs.View}" action="#{exerciseGroupBean.toViewExercise}" icon="ui-icon-search" 
					update=":exerciseDialog" oncomplete="wexerciseDialog.show()"  styleClass="ui-table-button">
					<f:setPropertyActionListener target="#{exerciseGroupBean.exercise}" value="#{exercise}"/>
				</p:commandButton>
			</p:column>

			<p:column colspan="1" styleClass="ui-table-button-row"  >
				<p:commandButton title="#{msgs.Delete}" icon="ui-icon-trash" styleClass="ui-table-button" action="#{exerciseGroupBean.deleteExercise}"
					 update=":growl, :tabExerciseGroup:exercisesForm:exercisesTableSource, :tabExerciseGroup:exercisesForm:exercisesTable"	 >
					<f:setPropertyActionListener target="#{exerciseGroupBean.exercise}" value="#{exercise}"/>
				</p:commandButton>

			</p:column>		
			<p:column headerText="#{msgs.Description}" style="max-width:300px;min-width:300px;width:300px" >
				<h:outputText value="#{exercise.description}" />
			</p:column>		

			<p:column headerText="#{msgs.BodyRegion}" >
				<h:outputText value="#{exercise.bodyRegionsText}" />
			</p:column>		

			<p:column headerText="#{msgs.MuscleGroup}" >
				<h:outputText value="#{exercise.muscleGroupsText}" />
			</p:column>		

		</p:dataTable>	

	</p:panel>

</h:form>

</html>